<template>
    <div class="container">
        <header>
            <div class="title">
                在线支付
            </div>
        </header>
        <!-- 订单信息 -->
        <h3>订单信息：</h3>
        <div class="order-info">
            <div class="top" @click="change">
                <p id="businessTitle">
                    {{orders.business.businessName}}
                    <i class="fa fa-caret-down"></i>
                </p>
                <p>&#165;{{orders.orderTotal}}</p>
            </div>
            <!-- 隐藏区域 -->
            <ul id="orderDetail" v-show="showflag">
                <li v-for="(item,index) in orders.listOrderDetailet" :key="index">
                    <p>{{item.food.foodName}} x {{item.quantity}}</p>
                    <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
                </li>
                <li>
                    <p>配送费</p>
                    <p>&#165;{{orders.business.deliveryPrice}}</p>
                </li>
            </ul>
        </div>
        <!-- 支付类型 -->
        <ul class="payment-type">
            <li>
                <img src="../assets/alipay.png" alt="">
                <i class="fa fa-check-circle"></i>
                <!-- <input type="radio" name="ok" class="fa fa-check-circle"> -->
            </li>
            <li>
                <img src="../assets/wechat.png" alt="">
                <i class="fa fa-check-circle"></i>
            </li>
        </ul>
        <!-- 支付按钮 -->
        <div class="paymen-btn">
            <button>确认支付</button>
        </div>
       <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer'
export default {
    name:'Payment',
    components:{
        Footer
    },
    data () {
        return {
            orderId:this.$route.query.orderId,
            orders:{
                business:{}
            },
            showflag:false
        }
    },
    created () {
        this.$axios
        .get("/OrdersController/getOrdersById?orderId=" + this.orderId)
        .then(response => {
            this.orders = response.data;
        })
        .catch(error => {
            console.log(error);
        });
    },
    methods:{
        change(){
            this.showflag = !this.showflag;
        }
    }
}
</script>

<style scoped>
/* *********************** header 部分 ***************************** */
.container header{
    width: 100%;
    height: 12vw;
}
.container header .title{
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 4.8vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
/* *********************** 订单信息 部分 ***************************** */
.container h3{
    width: 100%;
    box-sizing: border-box;
    padding: 4vw 4vw 0;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
}
.container .order-info .top{
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    color: #666;
    display: flex;
    justify-content: space-between;
}
.container .order-info .top p:first-of-type{
    cursor: pointer;
}
.container .order-info .top p:last-of-type{
    color: orangered;
}
/* 隐藏区域 */
#orderDetail li{
    box-sizing: border-box;
    padding: 1vw 4vw;
    font-size: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* *********************** 支付类型 部分 ***************************** */
.container .payment-type li{
    box-sizing: border-box;
    padding: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container .payment-type li img{
    width: 33vw;
    height: 8.9vw;
}
.container .payment-type li i{
    color: #666;
    font-size: 5vw;
}
/* .container .payment-type li input{
    width: 5vw;
    height: 5vw;
    border: 0;
    outline: none;
    color: #38ca73;
    font-size: 5vw;
} */
/* *********************** 按钮 部分 ***************************** */
.container .paymen-btn{
    box-sizing: border-box;
    padding: 4vw;
}
.container .paymen-btn button{
    width: 100%;
    height: 10vw;
    color: white;
    background-color: #38CA73;
    border: none;
    outline: none;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>